import React, { useEffect, useState } from "react";
import axios, { AxiosResponse } from "axios";
interface MovieType{
  img: string;
  nm: string;
}

interface MovieResponseType{
  data: {
    chiefBonus: object;
    coming: [];
    hot: MoviesType;
  }
}

//声明一个新的类型值为 MovieType 数组
type MoviesType = MovieType[];

export default function Movie() {
  //数据状态管理     useState 泛型函数
  let [movie, setMovie] = useState<MoviesType>([]); // [{item: 'xxx', nm: 'xx'}, {item: 'xxx', nm: 'xx'}]
  
  //发送请求获取数据
  useEffect(() => {
    //声明函数
    async function main() {
      //发送请求                 MovieResponseType  设置响应体的结构
      let result = await axios.get<MovieResponseType>("/meituan/ptapi/getHotFilms?ci=1&limit=10");
      setMovie(result.data.data.hot);
    }
    main();
  }, []);
  return (
    <div className="movie-container">
      <h2>电影列表</h2>
      <hr />
      <div className="movie-list">
        {movie.map((item, index) => {
          return (
            <div className="movie-item" key={index}>
              <img
                width="100%"
                src={item.img}
                alt=""
                height='230'
              />
              <p>{item.nm}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}
